<template>
  <div class="mod-menu main-container">
    <el-tabs
      v-model="activeName"
      class="tabs"
    >
      <el-tab-pane
        label="菜单配置"
        name="1"
      >
        <!-- 操作栏 -->
        <div class="operation-bar">
          <div
            class="default-btn primary-btn"
            @click="onAddOrUpdate()"
          >
            {{ $t("sysManagement.add") }}
          </div>
        </div>

        <!-- 表格 -->
        <div class="table-con shop-menu-table">
          <el-table
            :data="dataList"
            header-cell-class-name="table-header"
            style="width: 100%;"
            row-key="menuId"
          >
            <el-table-column
              prop="name"
              tree-key="menuId"
              width="260"
              :label="$t('publics.name')"
            />
            <el-table-column
              header-align="center"
              align="center"
              :label="$t('sys.icon')"
            >
              <template #default="scope">
                <svg-icon
                  v-if="scope.row.icon"
                  style="stroke: #8A979E !important;color: #8A979E"
                  :name="scope.row.icon || ''"
                  :icon-class="'icon-' + scope.row.icon"
                />
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="type"
              :label="$t('sysManagement.type')"
            >
              <template #default="scope">
                <span v-if="scope.row.type === 0">{{ $t('sys.catalog') }}</span>
                <span v-if="scope.row.type === 1">{{ $t('sys.menu') }}</span>
                <span v-if="scope.row.type === 2">{{ $t('sys.button') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="hidden"
              :label="$t('sys.isHidden')"
            >
              <template #default="scope">
                <span v-if="scope.row.hidden">{{ $t('sys.yes') }}</span>
                <span v-else>{{ $t('sys.no') }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderNum"
              :label="$t('hotSearch.seq')"
            />
            <el-table-column
              prop="url"
              width="150"
              :show-overflow-tooltip="true"
              :label="$t('sys.menuUrl')"
            >
              <template #default="scope">
                <span>{{ scope.row.url || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="perms"
              width="150"
              :show-overflow-tooltip="true"
              :label="$t('sys.authorization')"
            >
              <template #default="scope">
                <span>{{ scope.row.perms || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              align="center"
              width="150"
              :label="$t('sys.operation')"
            >
              <template #default="scope">
                <div class="text-btn-con">
                  <!-- <div
                v-if="isAuth('sys:shopMenu:update')" -->
                  <div
                    class="default-btn text-btn"
                    @click="onAddOrUpdate(scope.row.menuId)"
                  >
                    {{ $t('sysManagement.modify') }}
                  </div>
                  <!-- <div
                v-if="isAuth('sys:shopMenu:delete')" -->
                  <div
                    class="default-btn text-btn"
                    @click="onDelete(scope.row.menuId)"
                  >
                    {{ $t('coupon.delete') }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="版本权限"
        name="2"
      >
        <verAuth v-if="activeName === '2'" />
      </el-tab-pane>
    </el-tabs>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      @refresh-data-list="getDataList"
      @close="addOrUpdateClose"
    />
  </div>
</template>

<script setup>
import AddOrUpdate from './add-or-update.vue'
import { treeDataTranslate } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import verAuth from './ver-auth.vue'

const activeName = ref('1')

const dataList = ref([])
const dataListLoading = ref(false)
const addOrUpdateVisible = ref(false)
const addOrUpdateRef = ref(null)
onMounted(() => {
  getDataList()
})

// 获取数据列表
const getDataList = () => {
  dataListLoading.value = true
  http({
    url: http.adornUrl('/sys/shopMenu/table'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    dataList.value = treeDataTranslate(data, 'menuId')
    dataListLoading.value = false
  })
}
// 新增 / 修改
const onAddOrUpdate = (id) => {
  addOrUpdateVisible.value = true
  nextTick(() => {
    addOrUpdateRef.value?.init(id)
  })
}
// 删除
const onDelete = (id) => {
  ElMessageBox.confirm($t('seckill.isDeleOper'), $t('text.tips'), {
    confirmButtonText: $t('coupon.confirm'),
    cancelButtonText: $t('coupon.cancel'),
    type: 'warning'
  }).then(() => {
    http({
      url: http.adornUrl(`/sys/shopMenu/${id}`),
      method: 'delete',
      data: http.adornData()
    }).then(() => {
      ElMessage({
        message: $t('publics.operation'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          getDataList()
        }
      })
    })
  })
}
/**
 * 关闭销毁编辑弹框
 */
const addOrUpdateClose = () => {
  addOrUpdateVisible.value = false
}
</script>

<style lang="scss" scoped>
</style>
